{extend name="layout/common_layout" /}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/admin/newadmin/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="/static/admin/newadmin/css/admin.css" media="all">
<style>
    html {
        background-color: #f2f2f2;
        color: #666;
    }
</style>
{/block}

{block name="body"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
    <div class="layui-tab-title" style='margin-top:30px;'>
        <a class="layui-btn" >不固定车道</a>
    </div>
<div id="container"></div>
    </div>
</div>


{/block}
{block name='js'}
<script type="text/javascript" src="/static/admin/js/echarts.min.js"></script>
<script>
    $(function(){
       $.get("{:url('admin/Countpk/get_nolocation_lists')}",function(res){
           if(res.status==1){
               var datas = res.result;
               $.each(datas,function(k,v){
                   var c_id = 'container_'+k;
                   $('#container').append('<div id="'+c_id+'" style="height: 400px;width:90%;margin-top:20px;"></div>');
                   var dom = document.getElementById(c_id);
                   var str = '';
                   var colorlists = ['rgb(255, 255, 50)'];
                   if(k==1) {
                       str = '3至9车道统计';
                       
                   }else if(k==2) {
                       str = '不固定车道统计';
                       colorlists = ['rgb(189, 125, 50)'];
                   }
                   map(dom,str,v.x,v.y,v.y_count,v.y_bad,colorlists);
               })
           }
       },'json'); 
    });
    
    function map(dom,title,xdata,ydata,ycount,ybad,colorlists) {
            //var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            app.title = title;
            
            var option = null;
            option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger:"axis",
                    axisPointer: {type: 'shadow'},
                    formatter: function(params, ticket, callback) {
                        return '总数：'+ ycount[params[0].dataIndex] + "<br />" + 
                        '挂：'+ ybad[params[0].dataIndex] + "<br />" + '命中率：'+ params[0].data+'%'+"<br />" + '日期：'+ params[0].axisValue;
                    }
                },
                toolbox: {
                    show : true,
                    feature : {
                        magicType: {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                    }
                },
                calculable : true,
                title: {
                    text: title,
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xdata,
                        axisTick: {
                            alignWithLabel: true
                        },
                        scale: true,
                        name: '日期',
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: false,
                        name: '命中率',
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
               dataZoom: [
                    {
                        type: 'inside',
                        fillerColor:"rgba(167,183,204,0.4)",
                        showDataShadow: false,
                    },
                    {
                        type: 'slider',
                        fillerColor:"rgba(167,183,204,0.4)",
                        showDataShadow: false
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: '80%',
                        data: ydata,
                        itemStyle: {   
                            //通常情况下：
                            normal:{  
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params){
                                    var colorList = colorlists;
                                    return colorList[params.dataIndex];
                                }
                            },
                            //鼠标悬停时：
                            emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                                    
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                color:'#000',
                                fontSize:14,
                                formatter: '{c}%'
                            }
                        }
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    }
</script>
{/block}